﻿@model List<CoffeeShop.Models.Entities.Table>

@{
    ViewBag.Title = "Quản lý Bàn";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

<div class="breadcrumbs" id="breadcrumbs">
    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="/Home/Index">Trang chủ</a>

            <span class="divider">
                <i class="icon-angle-right arrow-icon"></i>
            </span>
        </li>
        <li class="active">Quản lý bàn</li>
    </ul>
    <!--.breadcrumb-->
</div>

<div class="page-content">
    <div>
        <h1 class="row-fluid header smaller lighter purple">
            <span>Quản lý bàn</span>
            <span>
                <a data-toggle="modal" href="#tblAddTable" class="pull-right inline">
                    <button class="btn btn-primary" id="btnAdd" onclick="loadOfficeToCombobox()">
                        <i class="icon-plus"></i>
                        Thêm mới
                    </button>
                </a>
            </span>
        </h1>
    </div>

    <div class="row-fluid" id="tableList">
        @Html.Partial("_TableList", Model)
    </div>

    <!-- Add new table form -->
    <div id="tblAddTable" class="modal hide" tabindex="-1">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="blue bigger">Thông tin bàn</h4>
        </div>

        <form id="formAddTable">
            <div class="modal-body overflow-visible">
                <div class="row-fluid">
                    <div class="span5">
                        <div class="control-group">
                            <div class="controls">
                                <div class="ace-file-input ace-file-multiple">
                                    <input type="file" id="imageFileAddTable">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="vspace"></div>

                    <div class="span7">
                        <div class="control-group" id="tableNameGroup">
                            <label class="control-label" for="txtTableName">Tên bàn</label>
                            <div class="controls">
                                <input type="text" id="txtTableName" name="txtTableName">
                                <div id="existedTableName" style="display: none" class="help-block">
                                    Tên bàn đã được sử dụng!
                                </div>
                            </div>
                        </div>

                        <div class="control-group" id="groupOffice">
                            <label class="control-label" for="cboOffice">Chi nhánh</label>
                            <div class="controls">
                                <select name="cboOffice" id="cboOffice" onchange="loadAreaByOfficeId(this)">
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>

                        <div class="control-group" id="groupArea">
                            <label class="control-label" for="cboArea">Khu vực</label>
                            <div class="controls">
                                <select name="cboArea" id="cboArea">
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <div class="modal-footer">
            <button class="btn btn-small" data-dismiss="modal">
                <i class="icon-remove"></i>
                Quay lại
            </button>

            <button class="btn btn-small btn-primary" onclick="addTable()">
                <i class="icon-ok"></i>
                Lưu
            </button>
        </div>
    </div>
    <!-- End add new Table form -->

    <!-- Update Table form -->
    <div id="tblUpdateTable" class="modal hide" tabindex="-1">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="blue bigger">Thông tin bàn</h4>
        </div>

        <form id="formUpdateTable">
            <div class="modal-body overflow-visible">
                <div class="row-fluid">
                    <div class="span5">
                        <div class="control-group">
                            <div class="controls">
                                <div class="ace-file-input ace-file-multiple">
                                    <input type="file" id="imageFileUpdateTable">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="vspace"></div>

                    <div class="span7">
                        <!-- TableID -->
                        <input type="text" id="txtUpdateTableId" name="txtUpdateTableId" style="display: none">

                        <div class="control-group" id="tableUpdateNameGroup">
                            <div class="controls">
                                <input type="text" class="span12" id="txtUpdateTableName" name="txtUpdateTableName" placeholder="Tên chi nhánh">
                                <div id="existedUpdateTableName" style="display: none" class="help-block">
                                    Tên bàn đã được sử dụng!
                                </div>
                            </div>
                        </div>

                        <div class="control-group" id="groupOfficeUpdate">
                            <label class="control-label" for="cboOfficeUpdate">Chi nhánh</label>
                            <div class="controls">
                                <select name="cboOfficeUpdate" id="cboOfficeUpdate" onchange="loadAreaComboboxByOfficeIdUpdate(this)">
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>

                        <div class="control-group" id="groupAreaUpdate">
                            <label class="control-label" for="cboAreaUpdate">Khu vực</label>
                            <div class="controls">
                                <select name="cboAreaUpdate" id="cboAreaUpdate">
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <div class="modal-footer">
            <button class="btn btn-small" data-dismiss="modal">
                <i class="icon-remove"></i>
                Quay lại
            </button>

            <button id="btnUpdate" class="btn btn-small btn-primary" onclick="updateTable()">
                <i class="icon-ok"></i>
                Chỉnh sửa
            </button>
        </div>
    </div>
    <!-- End edit office form -->
</div>
<script type="text/javascript">
    $(function () {
        $('#imageFileAddTable').ace_file_input({
            style: 'well',
            btn_choose: 'Kéo thả ảnh hoặc click chuột vào đây!',
            btn_change: null,
            no_icon: 'icon-cloud-upload',
            droppable: true,
            thumbnail: 'large',
            preview_error: function (filename, error_code) {
            }
        }).on('change', function () {
        });

        $('#imageFileUpdateTable').ace_file_input({
            style: 'well',
            btn_choose: 'Kéo thả ảnh hoặc click chuột vào đây!',
            btn_change: null,
            no_icon: 'icon-cloud-upload',
            droppable: true,
            thumbnail: 'large',
            preview_error: function (filename, error_code) {
            }
        }).on('change', function () {
        });

        validateAddTable("#formAddTable");
        validateUpdateTable("#formUpdateTable");
    })

    // ==================== Start add new table===========================

    // Show message error when insert a new Area
    function showAddMessageError() {
        $.gritter.add({
            title: 'Tạo mới bàn thất bại!',
            text: 'Xin hãy kiểm tra lại thông tin đã nhập hoặc kết nối với cơ sở dữ liệu',
            time: '1000',
            class_name: 'gritter-error'
        });
        return false;
    }

    // Show message success when insert a new Area
    function showMessageSuccess() {
        $.gritter.add({
            title: 'Tạo mới khu vực thành công!',
            text: 'Thông tin khu vực vừa nhập đã được tạo!',
            time: '1000',
            class_name: 'gritter-info'
        });
        return false;
    }

    // Cleanning add form when user finish insert a new Area
    function clearFormAddTable() {
        $('#txtTableName').val('');
    }

    // Validate form add table
    function validateAddTable(validateForm) {
        $(validateForm).validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: false,
            rules: {
                txtTableName: {
                    required: true,
                    maxlength: 50
                },
                cboOffice: {
                    required: true,
                },
                cboArea: {
                    required: true,
                }
            },
            messages: {
                txtTableName: {
                    required: "Xin hãy nhập tên bàn",
                    maxlength: "Tên bàn tối đa 50 ký tự!"
                },
                cboOffice: {
                    required: "Xin hãy chọn chi nhánh!",
                },
                cboArea: {
                    required: "Xin hãy chọn khu vực!",
                }
            },
            highlight: function (e) {
                $(e).closest('.control-group').removeClass('info').addClass('error');
            },
            success: function (e) {
                $(e).closest('.control-group').removeClass('error').addClass('info');
                $(e).remove();
            }
        });
    }

    // Add new table
    function addTable() {
        if ($('#formAddTable').valid()) {
            editFr = $('#tblAddTable').val();
            var tableName = $('#txtTableName', editFr).val();
            var officeId = $('#cboOffice option:selected', editFr).val();
            var areaId = $('#cboArea option:selected', editFr).val();

            $.post("/Table/CreateTable", {
                tableName: tableName, officeId: officeId, areaId: areaId
            }, function (result) {
                if (result == "ExistedTable") {
                    // Show error duplicate message
                    $('#existedUpdateAreaName').attr("style", "display: block");
                    $('#groupUpdateAreaName').removeClass('info').addClass('error');
                }
                if (result == "CreateSuccessful") {
                    $('.close').click();
                    reloadTable();
                    clearFormAddTable();
                    showMessageSuccess();
                }
                if (result == "CreateFail") {
                    $('.close').click();
                    clearFormAddTable();
                    showAddMessageError();
                }
            }).error(function () {
                $('.close').click();
                showMessageUpdateError();
            });
        }
    }

    // Load all office into "Chi nhánh" combobox
    function loadOfficeToCombobox() {
        $.post("/Table/GetListOffice", {}, function (out) {
            var item = "";
            item += '<option value=""></option>';
            $.each(out, function (index, office) {
                item += '<option value="' + office.ID + '">' + office.Name + '</option>';
            });
            $('#cboOffice').html(item);
            $("#cboOffice").trigger("chosen:updated");
        });
    }

    // Load all area into "Khu vực" combobox
    function loadAreaByOfficeId(office) {
        $.post("/Table/GetListAreasByOfficeId", { officeId: office.value }, function (out) {
            var item = "";
            item += '<option value=""></option>';
            $.each(out, function (index, area) {
                item += '<option value="' + area.AreaId + '">' + area.AreaName + '</option>';
            });
            $('#cboArea').html(item);
            $("#cboArea").trigger("chosen:updated");
        });
    }

    // ==================== End add new table =============================

    // ==================== Update table ==================================

    // Get an area by areaId
    function getTableById(tableId) {
        $.ajax({
            url: '@Url.Action("GetTableById", "Table")',
            type: 'GET',
            cache: false,
            data: { tableId: tableId },
            success: function (data) {
                $("#txtUpdateTableId").val(data.TableId)
                $("#txtUpdateTableName").val(data.Name)
                if (data.IsDeleted == true) {
                    $("#txtUpdateTableId").val(data.TableId).prop('readonly', true);
                    $("#txtUpdateTableName").val(data.Name).prop('readonly', true);
                    loadOfficeToComboboxUpdate(data.OfficeId);
                    loadAreaByOfficeIdUpdate(data.OfficeId, data.AreaId);
                }
                else {
                    $("#txtUpdateTableId").val(data.TableId).prop('readonly', true);
                    $("#txtUpdateTableName").val(data.Name).prop('readonly', false);
                    loadOfficeToComboboxUpdate(data.OfficeId);
                    loadAreaByOfficeIdUpdate(data.OfficeId, data.AreaId);
                }
            },
            error: function (data) {
                alert('Không thể lấy dữ liệu. Xin hãy thử lại!');
            }
        });
    }

    // Show message error when update an Area
    function showUpdateMessageError() {
        $.gritter.add({
            title: 'Cập nhật bàn thất bại!',
            text: 'Xin hãy kiểm tra lại thông tin đã nhập hoặc kết nối với cơ sở dữ liệu',
            time: '1000',
            class_name: 'gritter-error'
        });
        return false;
    }

    // Show message success when update an Area
    function showUpdateMessageSuccess() {
        $.gritter.add({
            title: 'Cập nhật khu vực thành công!',
            text: 'Thông tin bàn vừa nhập đã được tạo!',
            time: '1000',
            class_name: 'gritter-info'
        });
        return false;
    }

    // Cleanning add form when user finish update an Area
    function clearFormUpdateTable() {
        $('#txtUpdateTableId').val('');
        $('#txtUpdateTableName').val('');
    }

    // Validate form add table
    function validateUpdateTable(validateForm) {
        $(validateForm).validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: false,
            rules: {
                txtUpdateTableName: {
                    required: true,
                    maxlength: 50
                },
                cboOfficeUpdate: {
                    required: true,
                },
                cboAreaUpdate: {
                    required: true,
                }
            },
            messages: {
                txtUpdateTableName: {
                    required: "Xin hãy nhập tên bàn",
                    maxlength: "Tên bàn tối đa 50 ký tự!"
                },
                cboOfficeUpdate: {
                    required: "Xin hãy chọn chi nhánh!",
                },
                cboAreaUpdate: {
                    required: "Xin hãy chọn khu vực!",
                }
            },
            highlight: function (e) {
                $(e).closest('.control-group').removeClass('info').addClass('error');
            },
            success: function (e) {
                $(e).closest('.control-group').removeClass('error').addClass('info');
                $(e).remove();
            }
        });
    }

    function loadOfficeToComboboxUpdate(officeId) {
        $.post("/Table/GetListOffice", {}, function (out) {
            var item = "";
            item += '<option value=""></option>';
            $.each(out, function (index, office) {
                if (office.ID == officeId) {
                    item += '<option value="' + office.ID + '" selected>' + office.Name + '</option>';
                }
                else {
                    item += '<option value="' + office.ID + '">' + office.Name + '</option>';
                }
            });
            $('#cboOfficeUpdate').html(item);
            $("#cboOfficeUpdate").trigger("chosen:updated");
        });
    }

    // Load all area into "Khu vực" combobox
    function loadAreaByOfficeIdUpdate(office, areaId) {
        $.post("/Table/GetListAreasByOfficeId", { officeId: office }, function (out) {
            var item = "";
            item += '<option value=""></option>';
            $.each(out, function (index, area) {
                if (area.AreaId == areaId) {
                    item += '<option value="' + area.AreaId + '" selected>' + area.AreaName + '</option>';
                }
                else {
                    item += '<option value="' + area.AreaId + '">' + area.AreaName + '</option>';
                }
            });
            $('#cboAreaUpdate').html(item);
            $("#cboAreaUpdate").trigger("chosen:updated");
        });
    }

    // Update a table
    function updateTable() {
        if ($('#formUpdateTable').valid()) {
            editFr = $('#tblAddTable').val();
            var tableId = $('#txtUpdateTableId', editFr).val();
            var tableName = $('#txtUpdateTableName', editFr).val();
            var officeId = $('#cboOfficeUpdate option:selected', editFr).val();
            var areaId = $('#cboAreaUpdate option:selected', editFr).val();

            $.post("/Table/UpdateTable", {
                tableId: tableId, tableName: tableName, officeId: officeId, areaId: areaId
            }, function (result) {
                if (result == "ExistedTableName") {
                    // Show error duplicate message
                    $('#existedUpdateTableName').attr("style", "display: block");
                    $('#tableUpdateNameGroup').removeClass('info').addClass('error');
                }
                if (result == "UpdateSuccessful") {
                    $('.close').click();
                    reloadTable();
                    clearFormUpdateTable();
                    showUpdateMessageSuccess();
                }
                if (result == "FailUpdateTable") {
                    $('.close').click();
                    clearFormUpdateTable();
                    showUpdateMessageError();
                }
            }).error(function () {
                $('.close').click();
                showUpdateMessageError();
            });
        }
    }

    // Load all area into "Khu vực" combobox
    function loadAreaComboboxByOfficeIdUpdate(office) {
        $.post("/Table/GetListAreasByOfficeId", { officeId: office.value }, function (out) {
            var item = "";
            item += '<option value=""></option>';
            $.each(out, function (index, area) {
                item += '<option value="' + area.AreaId + '">' + area.AreaName + '</option>';
            });
            $('#cboAreaUpdate').html(item);
            $("#cboAreaUpdate").trigger("chosen:updated");
        });
    }

    // ==================== End update table ==============================

    // ==================== Common function ===============================

    // Reload table when users finish update or insert a new area
    function reloadTable() {
        $.ajax({
            url: "/Table/LoadAllTables",
            type: "POST",
            success: function (data) {
                $('#tableList').html(data);
            }
        });
    }
    // ==================== Common function ===============================
</script>
